<div class="tlp-form-element">
    <label class="tlp-label" for="toggle">Text align (based on radios)</label>
    <div class="tlp-button-bar">
        <div class="tlp-button-bar-item">
            <input type="radio" id="button-bar-left" name="button-bar-radio" class="tlp-button-bar-checkbox" checked>
            <label for="button-bar-left" class="tlp-button-primary">
                <i class="fa fa-align-left tlp-button-icon"></i> Left
            </label>
        </div>
        <div class="tlp-button-bar-item">
            <input type="radio" id="button-bar-center" name="button-bar-radio" class="tlp-button-bar-checkbox">
            <label for="button-bar-center" class="tlp-button-primary">
                <i class="fa fa-align-center tlp-button-icon"></i> Center
            </label>
        </div>
        <div class="tlp-button-bar-item">
            <input type="radio" id="button-bar-right" name="button-bar-radio" class="tlp-button-bar-checkbox">
            <label for="button-bar-right" class="tlp-button-primary">
                <i class="fa fa-align-right tlp-button-icon"></i> Right
            </label>
        </div>
        <div class="tlp-button-bar-item">
            <input type="radio" id="button-bar-justify" name="button-bar-radio" class="tlp-button-bar-checkbox">
            <label for="button-bar-justify" class="tlp-button-primary">
                <i class="fa fa-align-justify tlp-button-icon"></i> Justify
            </label>
        </div>
    </div>
</div>
